<template>
    <div>
        <h2>修改</h2>
        <table>
            <tr>
                <td>房型名称</td>
                <td>
                    <input type="text" placeholder="请输入房型名称" v-model="info.RName">
                </td>
            </tr>
            <tr>
                <td>房型图片</td>
                <td>
                    <img :src="info.Pic" style="max-width: 70px; max-width: 70px;">
                    <input type="file" @change="load">
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <input type="radio" name="aa" :value="true" v-model="info.State">上架
                    <input type="radio" name="aa" :value="false" v-model="info.State">下架
                </td>
            </tr>
            <tr>
                <td>房号</td>
                <td>
                    <select v-model="info.Nid">
                        <option value="0">请选择</option>
                        <option v-for="item in Rinfo" :value="item.Nid">{{item.NName}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>联系电话</td>
                <td>
                    <input type="text" placeholder="请输入联系电话" v-model="info.Phone">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="修改" @click="add">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue';
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
let router=useRouter();
let route=useRoute();
var id_=route.query.id;
alert(id_)
const info=ref({
    Rid:0,
    RName:'',
    Pic:'',
    State:true,
    Nid:0,
    Phone:''
})

const Rinfo=ref([{
    Nid:0,
    NName:''
}])

onMounted(()=>{
    getlist();
    FT();
})
const getlist=()=>{
    axios.get('https://localhost:7035/api/RoomType/GetRoomNumber')
    .then(res=>{
        Rinfo.value=res.data;
    })
}

const FT=()=>{
    axios.get('https://localhost:7035/api/RoomType/FT',{
        params:{
            id:id_
        }
    })
    .then(res=>{
        info.value=res.data;
    })
}

const load=(e:any)=>{
    let formData=new FormData();
    let file=e.target.files[0];
    formData.append("file",file);
    let imgAll=["image/jpeg","image/png","image/gif"];
    if(imgAll.indexOf(file.type)==-1){
        alert("上传类型只能是图片");
        return;
    }
    if(file.size>2*1024*1024){
        alert("图片大小不能大于2mb");
        return;
    }
    axios.post('https://localhost:7035/api/RoomType/LoadPic',formData).then(res=>{
        info.value.Pic=res.data;
    })
}


const add=()=>{
    if(!info.value.RName){
        alert("房型名称不能为空");
        return;
    }
    if(!info.value.Pic){
        alert("房型图片不能为空");
        return;
    }
    if(!info.value.State){
        alert("房型状态不能为空");
        return;
    }
    if(!info.value.Nid){
        alert("房号不能为空");
        return;
    }
    axios.put('https://localhost:7035/api/RoomType/UpdRoomType',{
        Rid:id_,
        RName:info.value.RName,
        Pic:info.value.Pic,
        State:info.value.State,
        Nid:info.value.Nid,
        Phone:info.value.Phone
    })
    .then(res=>{
        if(res.data>0){
            alert("修改成功");
            router.push("RoomTypeShow");
        }
        else if(res.data==-1)
        {
            alert("房型已经存在");
            return;
        }
        else{
            alert("修改失败");
            return;
        }
    })
}

</script>

<style scoped>

</style>